<div class="nav-wrapper">
    <ul id="nav"
        class="nav"
        data-ng-controller="NavCtrl"
        data-slim-scroll
        data-collapse-nav>
        <li class="nav-title" data-i18n="Navigation"> </li>
        <li>
		   <a href="#/dashboard/dashboard-v1"> <i class="fa fa-home"></i><span data-i18n="Dashboard"></span> </a>
		</li>
        <li>
            <a href="#/mail"><i class="fa fa-envelope-o"></i><span data-i18n="Mail"></span></a>
            <ul>
                <li><a href="#/mail/inbox"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Inbox"></span></a></li>
                <li><a href="#/mail/compose"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Compose"></span></a></li>
                <li><a href="#/mail/mailview"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Mail View"></span></a></li>
            </ul>
        </li>
        <li class="divider"></li>
        <li class="nav-title" data-i18n="Components"> </li>
        <li>
		   <a href="#/ecommerce"> <i class="fa fa-shopping-cart"></i><span data-i18n="E-commerce"></span> </a>
            <ul>
                <li><a href="#/ecommerce/dashboard"> <i class="fa fa-caret-right mr-10"></i><span data-i18n="Dashboard"></span> </a></li>
                <li><a href="#/ecommerce/orders"> <i class="fa fa-caret-right mr-10"></i><span data-i18n="Order"></span> </a></li>
                <li><a href="#/ecommerce/order-views"> <i class="fa fa-caret-right mr-10"></i><span data-i18n="Orders View"></span> </a></li>
                <li><a href="#/ecommerce/products"> <i class="fa fa-caret-right mr-10"></i><span data-i18n="Products"></span> </a></li>
            </ul>
		</li>
        <li>
            <a href="#/ui"><i class="fa fa-magic"></i><span data-i18n="UI Kit"></span></a>
            <ul>
                <li><a href="#/ui/animation"><i class="fa fa-caret-right mr-10"></i><span data-i18n="CSS3 Animation"></span></a></li>
                <li><a href="#/ui/panel"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Panel"></span></a></li>
                <li><a href="#/ui/xeditable"><i class="fa fa-caret-right mr-10"></i><span data-i18n="xeditable"></span></a></li>
                <li><a href="#/ui/buttons"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Buttons"></span></a></li>
                <li><a href="#/ui/fontawesome"><i class="fa fa-caret-right mr-10"></i><span data-i18n="fontawesome"></span></a></li>
                <li><a href="#/ui/icons"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Icons"></span></a></li>
                <li><a href="#/ui/components"><i class="fa fa-caret-right mr-10"></i><span data-i18n="BS3 Components"></span> </a></li>
                <li><a href="#/ui/widgets"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Widgets"></span> </a></li>
                <li><a href="#/ui/timeline"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Timeline"></span></a></li>
                <li><a href="#/ui/nested-lists"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Nested Lists"></span></a></li>
                <li><a href="#/ui/grids"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Grids"></span></a></li>
                <li><a href="#/ui/typography"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Typography"></span></a></li>
            </ul>
        </li>
        <li>
            <a href="#/pages"><i class="fa fa-file-text-o"></i><span data-i18n="Pages"></span></a>
            <ul>
                <li><a href="#/pages/faq"><i class="fa fa-caret-right mr-10"></i><span data-i18n="FAQ"></span></a></li>            
                <li><a href="#/pages/gallery"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Gallery"></span></a></li>            
                <li><a href="#/pages/directory"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Directory"></span></a></li>
                <li><a href="#/pages/profile"><i class="fa fa-caret-right mr-10"></i><span data-i18n="User Profile"></span></a></li>
                <li><a href="#/pages/invoice"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Invoice"></span></a></li>
                <li><a href="#/pages/signin"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Sign in"></span></a></li>
                <li><a href="#/pages/signup"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Sign Up"></span></a></li>
                <li><a href="#/pages/forgot-password"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Forgot Password"></span></a></li>
                <li><a href="#/pages/lock-screen"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Lock Screen"></span></a></li>
                <li><a href="#/pages/404"><i class="fa fa-caret-right mr-10"></i> <span data-i18n="404 Error"></span></a></li>
                <li><a href="#/pages/500"><i class="fa fa-caret-right mr-10"></i> <span data-i18n="500 Error"></span></a></li>
                <li><a href="#/pages/blank"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Blank Page"></span></a></li>
            </ul>
        </li>
        <li>
            <a href="#/table"><i class="fa fa-table"></i><span data-i18n="Tables"></span></a>
            <ul>
                <li><a href="#/tables/static"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Static Tables"></span></a></li>
                <li><a href="#/tables/responsive"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Responsive Tables"></span> </a></li>
                <li><a href="#/tables/dynamic"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Dynamic Tables"></span></a></li>
                <li><a href="#/ngtable/ngtable"><i class="fa fa-caret-right mr-10"></i><span data-i18n="ngtable"></span></a></li>
            </ul>
        </li>
        <li>
            <a href="#/form"><i class="fa fa-pencil"></i><span data-i18n="Forms"></span></a>
            <ul>
                <li><a href="#/forms/layouts"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Form Layouts"></span></a></li>
                <li><a href="#/forms/elements"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Form Elements"></span> </a></li>
                <li><a href="#/forms/select"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Ui Select"></span></a></li>                
                <li><a href="#/forms/validation"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Form Validation"></span></a></li>
                <li><a href="#/forms/wizard"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Form Wizard"></span></a></li>
            </ul>
        </li>
       <li>
            <a href="#/charts"><i class="fa fa-bar-chart-o"></i><span data-i18n="Charts"></span></a>
            <ul>
                <li><a href="#/charts/flot"><i class="fa fa-caret-right mr-10"></i> <span data-i18n="Flot Charts"></span></a></li>
                <li><a href="#/charts/morris"><i class="fa fa-caret-right mr-10"></i> <span data-i18n="Morris Charts"></span></a></li>
                <li><a href="#/charts/charts"><i class="fa fa-caret-right mr-10"></i> <span data-i18n="Other Charts"></span></a></li>
            </ul>
        </li>
        <li class="divider"></li>
        <li class="nav-title" data-i18n="Application"> </li>
        <li>
            <a href="#/calender/calender">
                <i class="fa fa-calendar"></i><span data-i18n="Calender"></span>
            </a>
        </li>
        <li class="nav-task">
            <a href="#/tasks/tasks">
                <i class="fa fa-tasks"></i><span data-i18n="Tasks"></span>
            </a>
        </li>
        <li>
            <a href="#/maps"><i class="fa fa-map-marker"></i><span data-i18n="Maps"></span></a>
            <ul>
                <li><a href="#/maps/gmap"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Google Map"></span></a></li>
                <li><a href="#/maps/vectormap"><i class="fa fa-caret-right mr-10"></i><span data-i18n="Vector Map"></span></a></li>
            </ul>
        </li>
        <li class="divider"></li>
        <li class="nav-title" data-i18n="Server Status"> </li>
        <li class="ph-15 nav-status">
            <p class="text-small pr-5"> <i class="fa fa-dashboard text-primary mr-5"></i> CPU Usage <span class="label label-primary pull-right">45%</span> </p>
            <div class="progress progressbar-xs">
            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
               <span class="sr-only">45% Complete</span>
            </div>
          </div>
        </li>
        <li class="ph-15 nav-status">
            <p class="text-small pr-5"> <i class="fa fa-database text-danger mr-5"></i> Bandwidth <span class="label label-danger pull-right">65%</span> </p>
            <div class="progress progressbar-xs">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
               <span class="sr-only">65% Complete</span>
            </div>
          </div>
        </li>
    </ul>
</div>